import { FC, useState } from 'react'
import { Empty, Typography, Table, type TableProps, Tag, Space, Button, Modal, Spin, message } from 'antd'
import { ExclamationCircleOutlined, StarOutlined } from '@ant-design/icons'

import styles from './common.module.scss'
import ListSearch from '../../components/ListSearch'
import useLoadQuestionListData from './hooks/useLoadQuestionListData'
import ListPage from '../../components/ListPage'
import { useRequest } from 'ahooks'
import { deleteQuestionsService, updateQuestionService } from '../../services/question'

type PropsType = {
  title: string
  isStar: boolean
  isPublished: boolean
  answerCount: number
  createdAt: string
}

const { Title } = Typography

const { confirm } = Modal

const Trash: FC = () => {
  /* const [
    questionList,
    //	setQuestionList
  ] = useState(rawQuestionList)
  */
  const [selectedIds, setSelectedIds] = useState<string[]>([])

  const { data, loading, refresh } = useLoadQuestionListData({ isDeleted: true })
  const { list: questionList, total } = data || {}

  const tableColumns: TableProps<PropsType>['columns'] = [
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '是否星标',
      dataIndex: 'isStar',
      key: 'isStar',
      render: (isStar: boolean) => <StarOutlined style={{ color: isStar ? 'red' : '' }} />,
      align: 'center',
    },
    {
      title: '是否发布',
      dataIndex: 'isPublished',
      key: 'isPublished',
      render: (isPublished: boolean) => (isPublished ? <Tag color="processing">已发布</Tag> : <Tag>未发布</Tag>),
    },
    {
      title: '答卷',
      dataIndex: 'answerCount',
      key: 'answerCount',
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
    },
  ]

  function del() {
    confirm({
      title: '确定彻底删除该问卷？',
      icon: <ExclamationCircleOutlined />,
      content: '删除以后不可找回',
      onOk: () => {
        deleteQuestions()
      },
    })
  }
  const { run: deleteQuestions } = useRequest(async () => await deleteQuestionsService(selectedIds), {
    manual: true,
    onSuccess: () => {
      message.success('删除成功')
      refresh()
      setSelectedIds([])
    },
  })

  const { run: recover } = useRequest(
    async () => {
      for await (const id of selectedIds) {
        await updateQuestionService(id, { isDeleted: false })
      }
    },
    {
      manual: true,
      debounceWait: 500,
      onSuccess: () => {
        message.success('恢复成功')
        refresh()
        setSelectedIds([])
      },
    }
  )

  const TableElement = (
    <>
      <div style={{ marginBottom: '16px' }}>
        <Space>
          <Button type="primary" disabled={!selectedIds.length} onClick={recover}>
            恢复
          </Button>
          <Button disabled={!selectedIds.length} color="danger" variant="outlined" onClick={del}>
            彻底删除
          </Button>
        </Space>
      </div>
      <Table
        rowKey="_id"
        dataSource={questionList}
        columns={tableColumns}
        pagination={false}
        rowSelection={{
          type: 'checkbox',
          onChange: selectedRowKeys => setSelectedIds(selectedRowKeys as string[]),
        }}
      />
    </>
  )

  return (
    <>
      <div className={styles.header}>
        <div className={styles.left}>
          <Title level={3}>回收站</Title>
        </div>
        <div className={styles.right}>
          <ListSearch />
        </div>
      </div>
      <div className={styles.content}>
        {loading && (
          <div style={{ textAlign: 'center' }}>
            <Spin />
          </div>
        )}
        {questionList?.length > 0 && TableElement}
        {!loading && questionList?.length === 0 && <Empty description="暂无数据" />}
      </div>
      <div className={styles.footer}>
        <ListPage total={total} />
      </div>
    </>
  )
}

export default Trash
